<template>
    <div class="partner">
        <div class="partner_header">
        <LoginHeader class="common_header">
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">拜博口腔咨询</span>
        <span slot="more"></span>
        </LoginHeader>
        <LoginHeader class="consult">
        <div slot="title">
            <img src="@/assets/njrpic/mouthconsult.png" alt="">
            <span>021-23301290</span>
        </div>
        <span slot="more">返回</span>
        </LoginHeader>
        </div>
        <div class="partner_main">
            <span>{{nowtime}}</span>
            <div  v-for="(item,index) in infoarr" :key="index" :class="{'left':item.flag==='other','right':item.flag==='user'}">
        <span class="three">{{item.value}}</span>
        <img src="@/assets/njrpic/mouthconsult.png" v-if="item.flag=='other'" alt="">
        <img src="@/assets/njrpic/xiaomi.png" v-else alt="">
        </div>
        </div>
        <div class="partner_bottom">
            <input type="text" v-model="inputcontent" @keypress.enter="sendinfo">
            <el-button type="success" @click="sendinfo">发送</el-button>
        </div>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            inputcontent:'',
            infoarr:[
                {value:'您好！这里是★泰康拜博口腔医院★在线预约平台，预约联系电话：15201910281微信：1520131081 （在线预约挂号请留下：患者姓名，年龄，电话，就诊日期）',flag:'other'}
            ],
            nowtime:'15:37'
        }
    },
    components:{
        LoginHeader
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        sendinfo(){
            if(this.inputcontent!==''){
                this.infoarr.push({value:this.inputcontent,flag:'user'})
                this.inputcontent=''
            }
        }
    },
    mounted(){
        let time=new Date();
        this.nowtime=(time.getHours()+ '').padStart(2, '0')+':'+(time.getMinutes() + '').padStart(2, '0')
    },
    updated(){
        // 聊天定位到底部
          let ele = document.getElementsByClassName('partner_main')[0];
          ele.scrollTop = ele.scrollHeight;
      },
}
</script>
<style lang="less" scoped>
.partner{
.consult{
    margin: 0;
    padding: 15px;
    background-color: #ededed;
    border-bottom: 4px solid #dfdfdf;
    >div{
        display: flex;
        align-items: center;
    }
    span{
        color: #7575eb;
    }
}
.partner_header{
    width: 100%;
    .common_header{
        margin: 0;
        padding: 25px;
        background-color: white;
    }
}
.partner_bottom{
    background-color: white;
    border-top: 2px solid #dfdfdf;
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 25px;
    input{
        width: 70%;
        height: 50px;
        margin-right: 5%;
        outline: 0;
        border: 1px solid #dee5e7;
    }
}
 ::-webkit-scrollbar{
    display: none
}
.partner_main{
   ::-webkit-scrollbar{
    display: none
}
    >span{
        color: #b8b8b8;
        position: relative;
        left: 50%;
    }
    padding: 25px;
      overflow-y: scroll;
      height: 1000px;
    background-color: #ededed;
    .right{
        text-align: right;
    display: flex;
    justify-content: flex-end;
    padding: 15px;
        >span{
        background-color: #96ee62;
        padding: 7px;
        display: inline-block;
        border-radius: 5px;
        position: relative;
        margin-right:10px ;
        font-size:12px;
        }
         >img{
           width: 10%;
        border-radius: 5px;
        }
    }
   .right .three:after{
           content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 15px;
    right: -25px;
    border: solid 15px;
    border-color: transparent transparent transparent #96ee62;
    font-size: 0;
        }
   .left{
    padding: 7px;
        >span{
        background-color: white;
        padding: 15px;
        display: inline-block;
        border-radius: 5px;
        position: relative;
        font-size:12px;
        width: 70%;
        }
         >img{
             float: left;
           width: 10%;
        border-radius: 5px;
        margin-right:10px ;
        }
    } 
     .left .three:after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 9px;
    left: -25px;
    border: solid 15px;
    border-color: transparent white transparent transparent;
    font-size: 0;
        }
}
}

</style>